<template>
  <el-row class="rank">
    <el-row class="title">{{ title }}</el-row>
    <el-divider></el-divider>
    <el-row class="sort">
      <el-col :span="6" :offset="12">
        <el-button type="text" @click="sortFuntion = 'browse'"
          >浏览数</el-button
        >
      </el-col>
      <el-col :span="6">
        <el-button type="text" @click="sortFuntion = 'comments'"
          >评论数</el-button
        >
      </el-col>
    </el-row>
    <el-row v-for="(item, index) in rankList" :key="index" class="list">
      <el-col :span="3" class="number">
        <span
          class="numberColor"
          :class="[
            index === 0 ? 'numberColor--hot1' : '',
            index === 1 ? 'numberColor--hot2' : '',
            index === 2 ? 'numberColor--hot3' : ''
          ]"
          >{{ index + 1 }}</span
        >
      </el-col>
      <el-col :span="17" class="news__title">
        <nuxt-link class="list__title" :to="'/news/' + item.id">{{
          item.title
        }}</nuxt-link>
      </el-col>
      <el-col :span="4">{{ item.number }}</el-col>
    </el-row>
  </el-row>
</template>

<script>
import _ from 'lodash'
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    rank: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      sortFuntion: 'browse'
    }
  },
  computed: {
    rankList() {
      if (this.sortFuntion === 'browse') {
        return _.cloneDeep(this.rank.browse).sort((item1, item2) => {
          return item2.number - item1.number
        })
      }
      return _.cloneDeep(this.rank.comments).sort((item1, item2) => {
        return item2.number - item1.number
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rank {
  margin-top: 10px;
}
.title {
  height: 30px;
  @include font(16px, 700);
  @include flexCenter;
}

.el-divider {
  margin: 6px 0;
  background: $--color-primary;
}
.sort .el-col {
  @include flexCenter(flex-end);
  & .el-button {
    padding: 0;
  }
}
.list {
  border-bottom: 1px solid #f3f3f3;
  height: 56px;
  & > .el-col {
    height: 100%;
    @include flexCenter;
  }
  & > .news__title {
    @include flexCenter($jc: flex-start);
  }
}
.list__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  @include font(16px, 500);
  @include flexCenter($jc: flex-start);
  &:hover {
    color: $--color-primary;
  }
}
.numberColor {
  display: inline-block;
  padding: 1px 0;
  color: #fff;
  width: 14px;
  line-height: 100%;
  font-size: 12px;
  text-align: center;
  background-color: #8eb9f5;
}
.numberColor--hot1 {
  background-color: #f54545;
}
.numberColor--hot2 {
  background-color: #ff8547;
}
.numberColor--hot3 {
  background-color: #ffac38;
}
</style>
